﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>IMG ZOOM</title>
	<style>
		.container{
			position:relative;
		}
		
		.izImage, izViewer{
			border:1px solid #000;
			background:#fff url('o_loading.gif') no-repeat center;
		}
		.izImage{
			width:300px;
			cursor:crosshair;
		}
		.izViewer{
			width:200px;
			height:200px;
			position:absolute;
			left:320px;
			top:0;
			display:none;
		}
		.izViewer div{
			position:absolute;
			border:0 dashed #999;
			top:0;
			left:0;
			z-index:999;
			width:100%;
			height:100%;
		}
	</style>
</head>
<body>
	<div class="container">
		<img id="idImage" class="izImage" src="o_vivian.jpg" />
		<div id="idViewer" class="izViewer">
			<div style="height:50%;border-bottom-width:1px;"></div>
			<div style="width:50%;border-right-width:1px;"></div>
		</div>
	</div>
	<br>
	<input type="button" id="idStop" value="暂停" />
	<input type="button" id="idHide" value="取消隐藏" />
	<input type="button" id="idRange" value="指定范围" />
	<input type="button" id="idMouse" value="鼠标缩放" />
	<select id="idScale">
		<option value="0">按大图放大</option>
		<option value="2">放大2倍</option>
		<option value="5">放大5倍</option>
		<option value="10">放大10倍</option>
	</select>
	<br />
	<br />
	<script type="text/javascript" src="./aider.js"></script>
	<script type="text/javascript" src="./j.js"></script>
	<script type="text/javascript">
	function $$(id){
		return document.getElementById(id);
	}


	var iz = mooluZoom($$('idImage'), $$('idViewer'), {
		onLoad : function(){
			$$('idStop').value = '暂停';
		}
	});

	$$('idScale').onchange = function(){
		iz.reset({
			scale : this.value | 0
		});
	}

	$$('idRange').onclick = function(){
		if(this.value == '指定范围'){
			iz.reset({
				rangeWidth : 40,
				rangeHeight : 40
			});
			this.value = '自动范围';
		}else{
			$$OBEA.setStyle($$('idViewer'), {
				width : '',
				height : ''
			});
			iz.reset({
				rangeWidth : 0,
				rangeHeight : 0
			});
			this.value = '指定范围';
		}
	}
	
	$$('idHide').onclick = function(){
		if(this.value == '自动隐藏'){
			iz.autoHide = true;
			this.value = '取消隐藏';
		}else{
			iz.autoHide = false;
			iz._viewer.style.display = 'block';
			this.value = '自动隐藏';
		}
	}

	$$('idMouse').onclick = function(){
		if(this.value == '鼠标缩放'){
			iz.mouse = true;
			this.value = '取消缩放';
		}else{
			iz.mouse = false;
			iz.reset({
				scale : $$('idScale').value | 0
			});
			this.value = '鼠标缩放';
		}
	}

	$$('idStop').onclick = function(){
		if(this.value == '暂停'){
			iz.stop();
			this.value = '继续';
		}else{
			iz.start();
			this.value = '暂停';
		}
	}	
		
	</script>
</body>
</html>